@import "./normalize.css";
@import "./base.css";

body {
  background: #f5f5f5;
}

.container {
  width          : 1240px;
  display        : flex;
  justify-content: space-between;

  .itemBox {
    width     : 296px;
    height    : 285px;
    background: #fff;
    cursor    : pointer;
    transform : translate3d(0, -2px, 0);
    transition: all .2s linear;

    &:hover {
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    }

    .itemImg {
      position: relative;
      width   : 296px;
      height  : 180px;

      &:hover {
        .iconfont {
          background  : #ff6a00;
          border-color: #ff6a00;
        }
      }

      img {
        width : 100%;
        height: 100%;
      }

      .iconfont {
        position        : absolute;
        left            : 20px;
        bottom          : 10px;
        color           : #fff;
        width           : 32px;
        height          : 20px;
        border          : 2px solid #fff;
        border-radius   : 12px;
        background-color: rgba(0, 0, 0, .6);
        text-align      : center;
        line-height     : 20px;
        font-size       : 12px;
        transition      : all .2s linear;
      }

    }

    .itemTitle {
      text-align: center;
      margin-top: 28px;
    }

  }
}